{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans 'Questions' %}{% endblock %}

{% block head %}
  <link href="{{ STATIC_URL }}css/questions.css" rel="stylesheet">
  <script src="{{ STATIC_URL }}js/questions.js"></script>
{% endblock head %}

{% block main %}
  <div class="page-header">
    <a href="{% url 'ask' %}" class="btn btn-primary pull-right">
      <span class="glyphicon glyphicon-bullhorn"></span> {% trans "Ask Question" %}
    </a>
    <h1>{% trans "Questions" %}</h1>
  </div>
  <div class="questions">
    <ul class="nav nav-tabs" style="margin-bottom: 1.4em">
      <li{% if active == 'unanswered' %} class="active"{% endif %}><a href="{% url 'unanswered' %}">{% trans "Unanswered" %}</a></li>
      <li{% if active == 'answered' %} class="active"{% endif %}><a href="{% url 'answered' %}">{% trans "Answered" %}</a></li>
      <li{% if active == 'all' %} class="active"{% endif %}><a href="{% url 'all' %}">{% trans "All Questions" %}</a></li>
    </ul>
    {% for question in questions %}
      {% include 'questions/partial_question.html' with question=question %}
    {% empty %}
      <h4 class="no-data">{% trans "No question to display" %}</h4>
    {% endfor %}
    {% include 'paginator.html' with paginator=questions %}
  </div>
{% endblock main %}